<template>
        <ol class="details">
            <li v-for="(group, index) in dataSource" :key="index">
                <div id="date">
                    {{ group.date }}
                    <span>
                        <span>￥</span>
                        <span v-if="currentType == 1">-</span>
                        <span v-if="currentType == 2">+</span>
                        <span>{{group.total}}</span>
                    </span>
                </div>
                <ol>
                    <li class="item clearfix" v-for="item in group.handAcountVoList" :key="item.createdAt">
                        <div class="left">
                            <div class="circle">
                                <Tag :name="item.iconstr"/>
                            </div>
                            <span class="label">{{ item.icondesc }}</span>
                            <span class="note">{{item.descstr}}</span>
                        </div>
                        <span class="right amount">
                            <span>￥</span>
                            <span v-if="item.type == 1">-</span>
                            <span v-if="item.type == 2">+</span>
                            <span>{{item.amount}}</span>
                        </span>
                    </li>
                </ol>
            </li>
        </ol>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component,Prop} from 'vue-property-decorator';
    import { API_GetTagOptions } from "@/api/money"

    @Component
    export default class DetailItem extends Vue {
        @Prop({required:true}) dataSource! : { date:string, total: number, handAcountVoList: RecordItem[] }[];
        @Prop() currentType!:string;
        tagList = [];
        
        created() {
            this.getTagOptions();
        }

        // 获取标签
        getTagOptions() {
            API_GetTagOptions({ type: this.currentType }).then(res => {
                if(res.data.code === 0) {
                    this.tagList = res.data.result;
                }
            })
        }
    }
</script>

<style lang="scss" scoped>
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .details {
        margin-top: 15px;
        #date{
            display: flex;
            justify-content: space-between;
            margin: 0 30px;
            font-size: 14px;
            font-weight: 700;
            color: #101010;
        }
        .item {
            padding:7px 15px;
            background-color: #FFF4DD;
            margin:5px 10px;
            border-radius: 10px;
            .left {
                float: left;
                display: flex;
                .circle {
                    width: 40px;
                    height: 40px;
                    border-radius: 20px;
                    background-color: #FFFAF0;
                    ::v-deep .tag {
                        width: 26px;
                        height: 26px;
                        margin: 7px;
                    }
                }
                .label {
                    font-size: 18px;
                    color:#666;
                    margin:0 15px;
                    margin-top: 7px;
                }
                .note {
                    font-size: 18px;
                    color:#AAA;
                    margin-top: 7px;
                }
            }
            .right  {
                float: right;
                font-size: 18px;
                color:#666;
                margin:0 10px;
                font-weight: 700;
                margin-top: 7px;
            }

        }
    }
</style>